<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button onclick="getProducts1()">发送请求1</button>
    <button onclick="getProducts2()">发送请求2</button>
    <button onclick="cancelReq()">取消</button>


    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
    <script>
        let cancel // 用于保存取消请求的函数
        function getProducts1() {
            // 在准备发请求前，取消未完成的请求
            if (typeof cancel === 'function') {
                cancel('取消请求')
            }
            axios({
                url: 'http://localhost:4000/products1',
                cancelToken: new axios.CancelToken(function executor(c) { // c是用于取消当前请求的函数
                    // 保存取消函数，用于之后可能需要取消当前请求
                    cancel = c;
                })
            }).then(
                response => {

                    cancel = null
                    console.log('请求1成功了', response.data)
                },
                error => {
                    if (axios.isCancel(error)) {
                        console.log('请求1取消的错误', error.message)
                    } else { // 请求出错了
                        cancel = null
                        console.log('请求1失败了', error.message, error) // 请求1失败了 强制取消请求 Cancel {message: "强制取消请求"}
                    }
                }
            )

        }

        function getProducts2() {
            // 在准备发请求前，取消未完成的请求
            if (typeof cancel === 'function') {
                cancel('取消请求')
            }
            axios({
                url: 'http://localhost:4000/products2',
                cancelToken: new axios.CancelToken(function executor(c) {
                    cancel = c;
                })
            }).then(
                response => {
                    cancel = null
                    console.log('请求2成功了', response.data)
                },
                error => {
                    if (axios.isCancel(error)) {
                        console.log('请求2取消的错误', error.message)
                    } else {
                        cancel = null
                        console.log('请求2失败了', error.message, error)
                    }
                }
            )
        }
        function cancelReq() {
            // alert('取消请求')
            // 执行取消请求的函数
            if (typeof cancel === 'function') {
                cancel('强制取消请求')
            } else {
                console.log('没有可取消的请求')
            }
        }


    </script>
</body>

</html>